<template>
  <div
    class="seoCustomer-banner"
    :style="{
      background: 'url(' + props.bgUrl + ') no-repeat',
      backgroundSize: 'cover',
      backgroundPosition: props.backgroundPosition
    }"
  >
    <div class="banner-content">
     <slot></slot>
      <ul class="banner-content-list mt-32">
        <li class="list-item" :style="`color: ${props.listColor};`" v-for="item in props.listArr">{{ item }}</li>
      </ul>
      <span v-if="showLi" class="extent mt-24">... ...</span>
      <div class="Consultation" @click="handleOpenChat">
        <div class="Consultation-inner">{{ buttonText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import EventBus from "@/utils/eventBus.js";
const handleOpenChat = () => {
  if (props.isContact) {
    //如果是关于我们页则滚动
    EventBus.emit("aboutUsScrollTo");
  } else {
    EventBus.emit("openCustomerChat", {
      message: props.chatInfo,
    });
  }
};
const props = defineProps({
  bgUrl: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  subTitle: {
    type: String,
    default: "",
  },
  listArr: {
    type: Array,
    default: [],
  },
  chatInfo: {
    type: String,
    default: "",
  },
  buttonText: {
    type: String,
    default: "",
  },
  showLi: {
    type: Boolean,
    default: false,
  },
  isContact: {
    type: Boolean,
    default: false,
  },
  backgroundPosition: {
    type: String,
    default: "right",
  },
  listColor: {
    type: String,
    default: "#fafafa",
  }
});
</script>

<style lang="scss" scoped>
.seoCustomer-banner {
  width: 100%;
  height: 812px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .banner-content {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .banner-content-title {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 24px;
      color: #ffffff;
    }

    .banner-content-subtitle {
      width: 198px;
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 16px;
      color: #fafafa;
    }

    .list-item {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: 400;
      font-size: 14px;
      color: #fafafa;
      line-height: 14px;
      text-align: left;

      & + .list-item {
        margin-top: 12px;
      }

      &::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border: 2px solid #e62e3d;
        border-radius: 50%;
        margin-right: 8px;
        box-sizing: border-box;
      }
    }

    .extent {
      font-weight: 500;
      font-size: 20px;
      color: #1a1a1a;
    }

    .el-button {
      width: 170px;
      height: 49px;
      border-radius: 29px 29px 29px 29px;
      border: 1px solid #e62e3d;
      font-weight: 300;
      font-size: 18px;
      color: #e62e3d;
      background: none;
    }
  }
}

.Consultation {
  width: 170px;
  height: 49px;
  line-height: 49px;
  border-radius: 29px;
  text-align: center;
  font-size: 18px;
  border: 1px solid #ffffff;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  margin-top: 96px;
  transition: width 0.2s linear;
  cursor: pointer;

  .Consultation-inner {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    letter-spacing: 3px;
    transition: width 0.2s linear;
    /* 添加过渡效果 */
  }
}

.Consultation:hover {
  width: 200px;
  height: 49px;
  line-height: 49px;
  color: #ffffff;
  text-align: center;
  padding: 2px;
  transition: width 0.2s linear;

  .Consultation-inner {
    background: #e62e3d;
    border-radius: 29px;
    transition: width 0.2s linear;
  }
}
</style>
